<template>
  <div class="container">
    <h2>柱状图</h2>
    <div class="chart-container">
      <div id="lineChart" style="height:500px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "barChart",
  data() {
    return {
      option: {
        title: {
          text: "主标题",
          subtext: "子标题",
          link: "http://www.baidu.com",
          // left: "top",
          top: "top",
          textStyle: {
            fontSize: 30,
            color: "#ff8040",
          },
          subtextStyle: {
            fontSize: 20,
          },
        },
        tooltip: {
          show: true,
          trigger: "axis",
          triggerOn: 'click',
          //  formatter: 'a = {a}; b={b}; c={c}',
          formatter: (params) => {
            console.log(params);
            return params[0].seriesName + "的数据是: " + params[0].data;
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "月份",
            data: [120, 200, 150, 80, 70, 110, 300],
            type: "bar",
            markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值",
                },
                {
                  type: "min",
                  name: "最小值",
                },
              ],
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值",
                },
              ],
            },
            label: {
              show: true,
            },
            barWidth: 60,
          },
        ],
      },
    };
  },
  mounted() {
    this.getLineChart();
  },
  methods: {
    // 设置折线图
    getLineChart() {
      this.lineChart = this.$echart.init(document.getElementById("lineChart"));
      this.lineChart.setOption(this.option);
    },
  },
};
</script>

<style lang="less">
.chart-container {
  canvas {
    // width: 200px !important;
  }
}
</style>